<script>

import axios from "axios";
import fileList from "@/components/FileList.vue";
import {useActiveElement} from "@vueuse/core";
import {watch} from "vue";

export default {
  computed: {
    fileList() {
      return fileList
    }
  },
  data() {
    return {
      fileName: "",
      searchList: null,
			loading: false,
      focusElement: null
    }
  },
  methods: {
    search() {
			this.loading = true
      axios.get("/api/search/list", {
        params: {
          fileName: this.fileName,
          path: ""
        }
      }).then(resp => {
        if (resp.data.code === 200) {
          this.searchList = resp.data.data
          console.log(resp.data)
        }else {
            this.$message({
              message: resp.data.message,
              type: "error"
            })
        }
				this.loading = false
      }).catch(resp => {
        this.$message({
          message: resp.error,
          type: "error"
        })
				this.loading = false
      })
    },
    toDateString(row, column, milliseconds) { //毫秒数转字符串时间
      let date = new Date(milliseconds);
      let Y = date.getFullYear() + '-';
      let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
      let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
      let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
      let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s
    },
    handleKeyDown(event) {
      if (event.key === "Enter") {
        if (this.focusElement === "300")
          this.search()
      }
    },
    toNumber(num) { //保留两位小数
      return num.toFixed(2)
    },
		jump() {
		  this.$router.push("/list")
		}
  },
  mounted() {
    window.addEventListener("keydown", this.handleKeyDown) //键盘监听
    const activeElement = useActiveElement()
    watch(activeElement, (el) => { // 当前焦点
      this.focusElement = el.id
    })
  }
}
</script>

<template>

  <div align="center" style="padding-top: 40px">
		<div align="center" style="width: 1350px">
		<el-button icon="el-icon-back" style="float: left; display: flow;" @click="jump"></el-button>
		<div>
			<el-input placeholder="请输入文件名" v-model="fileName" id="300" style="background: #fff; width: 80%;" autofocus>
				<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
			</el-input>
		</div>
    <el-table
        :data="searchList"
				v-loading="loading"
        height="800px"
    >
      <el-table-column
          prop="fileName"
          label="文件名"
          sortable
          width="220"
      >
      </el-table-column>
      <el-table-column
          prop="size"
          label="大小"
          sortable
          width="100">
        <template slot-scope="scope"> <!-- 判断数据大小以给定合适单位 -->
          <span v-if="scope.row.size <= 1024">{{scope.row.size}} B</span>
          <span v-else-if="scope.row.size <= 1024 * 1024">{{toNumber(scope.row.size / 1024)}} KB</span>
          <span v-else-if="scope.row.size <= 1024 * 1024 * 1024">{{toNumber(scope.row.size / (1024 * 1024))}} MB</span>
          <span v-else>{{toNumber(scope.row.size / (1024 * 1024 * 1024))}} GB</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="creationTime"
          label="创建时间"
          sortable
          width="180px"
          :formatter="toDateString">
      </el-table-column>
      <el-table-column
          prop="lastAccessTime"
          label="最后访问时间"
          sortable
          width="180px"
          :formatter="toDateString">
      </el-table-column>
      <el-table-column
          prop="lastModifiedTime"
          label="最后修改时间"
          sortable
          width="180px"
          :formatter="toDateString">
      </el-table-column>
      <el-table-column
          prop="path"
          label="文件路径"
          width="490px"
      >
      </el-table-column>
      <template v-if="JSON.stringify(searchList) === '[]' ">
      <div slot="empty" class="empty">
        <span style="color: red">未找到文件</span>
      </div>
      </template>
    </el-table>
		</div>
  </div>
</template>

<style scoped>

</style>